<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width="1080" height="630" style="border: 1px solid;"></canvas>
</body>

</html>
<script>

    const ctx = myCanvas.getContext('2d');

    let p1 = [300, 200];
    let p2 = [500, 180];
    let p3 = [200, 280];

    /**
     * 获取两个向量之间的旋转角类型, 逆时针：0~180还是超过180，用于简化计算
     */
    getRotateType = function ([x1, y1], [x2, y2]) {
        let cross = x1 * y2 - x2 * y1;  // 叉乘
        if (cross < 0) {
            return '>180';
        } else {
            return '<=180';
        }
    };
    let vct1 = [p2[0] - p1[0], p2[1]-p1[1]]
    let vct2 = [p3[0] - p1[0], p3[1]-p1[1]]
    let typeStr = getRotateType(vct1, vct2);

    ctx.font = "18px serif";
    ctx.lineWidth = 5;
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.strokeStyle = "red";
    ctx.fillText("p1", p1[0], p1[1] - 10);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p3[0], p3[1]);
    ctx.strokeStyle = "blue";
    ctx.stroke();
    ctx.fillText("p2", p2[0], p2[1] - 10);
    ctx.fillText("p3", p3[0], p3[1] + 10);

    ctx.fillText("逆时针方向,旋转类型是:"+typeStr, 50,50);

</script>
<style>
    canvas {
        border: 1px solid #ccc;
        background-image: linear-gradient(90deg,
                #ffffb8 1%,
                rgba(0, 0, 0, 0) 5%),
            linear-gradient(#ffffb8 1%, rgba(0, 0, 0, 0) 5%);
        background-size: 28px 28px;
    }
</style>